<template>
	<view class="flex fixed left-0 bottom-0 right-0 bg-white border-t border-black__10 p-2 text-xs justify-around" style="z-index: 100000;">
		<view v-for="(item,index) in list" :key="index" class="flex flex-1 items-center flex-col justify-center" @click="navigator(item)">
			<image :src="item.activeIcon" v-if="item.activePathList.includes(activePath)" class="icon"></image>
			<image :src="item.icon" v-else class="icon"></image>
			<view class="mt-1" :class="{activeText:item.activePathList.includes(activePath)}">{{item.name}}</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				activePath:'/pages/index/index',
				list: [{
					name: '首页',
					path: '/pages/index/index',
					icon: '/static/image/tabBar/icon_home.png',
					activeIcon: '/static/image/tabBar/icon_home_sel.png',
					activePathList:['/pages/index/index','/'],// 当前路径符合数组内的，当前选项选中
				},
				{
					name: '申请账号',
					path: '/pages/applyAccount/aliyun/aliyun',
					icon: '/static/image/tabBar/icon_yingy.png',
					activeIcon: '/static/image/tabBar/icon_yingy_sel.png',
					activePathList:['/pages/applyAccount/aliyun/aliyun','/pages/applyAccount/tencentCloud/tencentCloud','/pages/applyAccount/AWSCloud/AWSCloud',
					'/pages/applyAccount/googleCloud/googleCloud'],// 当前路径符合数组内的，当前选项选中
				},
				{
					name: '自助充值',
					path: '/pages/redeemVoucher/aliyun/aliyun',
					icon: '/static/image/tabBar/xx.png',
					activeIcon: '/static/image/tabBar/xxA.png',
					activePathList:['/pages/redeemVoucher/aliyun/aliyun','/pages/redeemVoucher/tencentCloud/tencentCloud','/pages/redeemVoucher/AWSCloud/AWSCloud',
					'/pages/redeemVoucher/googleCloud/googleCloud'],// 当前路径符合数组内的，当前选项选中
				},
				{
					name: '我的',
					path: '/pages/account/aliyun/aliyun',
					icon: '/static/image/tabBar/icon_my.png',
					activeIcon: '/static/image/tabBar/icon_my_sel.png',
					activePathList:['/pages/account/aliyun/aliyun','/pages/account/tencentCloud/tencentCloud','/pages/account/AWSCloud/AWSCloud',
					'/pages/account/googleCloud/googleCloud'],// 当前路径符合数组内的，当前选项选中
				}
				]
			}
		},
		computed: {
			...mapState({
				mode:state=>state.app.mode
			})
		},
		watch: {
			$route: {
				immediate: true,
				handler(newRoute) {
					this.activePath = newRoute.path
				}
			}
		},
		methods: {
			navigator(row){
				uni.navigateTo({
					url:row.path
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.icon{
		width: 40rpx;height: 40rpx;
	}
	.activeText{
		color: #597EF7;
	}
</style>